<!-- 知识点掌握互动 -->
<template>
	<div class="pannel" style="margin: 0 120px; width: auto">
		<div class="cardbox flex flex-v">
			<div class="bind-con">
				<div class="bind-hd">
					<!-- <span class="class">{{ formData.className }}</span> -->
					<span style="margin-left: 40px">
						掌握知识点人数：
						<span class="hasBindValue" style="color: #579fff">{{ signInNum }}</span>
					</span>
					<span style="margin-left: 40px">
						未掌握知识点人数：
						<span class="hasBindValue" style="color: #ff1200">{{ feedbackNo }}</span>
					</span>
					<span style="margin-left: 40px">
						未反馈人数：
						<span class="hasBindValue">{{ studentList.length - signInNum - feedbackNo }}</span>
					</span>
					<!-- <span style="margin-left: 40px" v-if="machineData.machId">
						接收器{{ machineData.machId }}：
						<span :class="[machineData.online == 1 ? 'connect' : 'no-connect']">{{
							machineData.online == 1 ? '已连接' : '未连接'
						}}</span>
					</span> -->
				</div>
				<div class="bind-bd" style="width: 100%">
					<div class="list">
						<div style="height: calc(100% - 40px); overflow: auto; padding: 0 20px">
							<div class="sign-con">
								<div
									v-for="(item, index) in signUserList"
									:key="item.studId"
									class="sign-item flex flex-v flex-align-center bigtosmall"
								>
									<img src="/impromptu/gou_selected_red.png" v-if="item.status == '0'" />
									<img src="/impromptu/gou_selected.png" v-else />
									{{ item.studName }}
								</div>
								<div
									v-for="(item, index) in noFeedback"
									:key="item.studId"
									class="sign-item flex flex-v flex-align-center"
								>
									<img src="/impromptu/gou.png" />
									{{ item.studName }}
								</div>
							</div>
							<div class="tips" v-if="isFeedback">
								请掌握知识点的同学按
								<b class="high">“√/×键”</b>
								进行反馈
							</div>
						</div>
					</div>
				</div>
			</div>
			<a href="javascript:;" class="closeWin" @click="reback"><img src="closeWin.png" alt="" /></a>
		</div>
		<div class="conbox-ft flex flex-align-center flex-pack-justify">
			<div @click="toggleSign" class="ft-btn save-btn" :class="{ red: isFeedback }">
				{{ isFeedback ? '停止反馈' : '开始反馈' }}
			</div>
		</div>
		<div class="topicType">
			<img :src="`/impromptu${isPro ? '_pro' : ''}/topicType.png`" class="img" />
			<span class="name">教学反馈</span>
		</div>
	</div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
import { debounce } from '@/utils/base.js';
export default {
	name: 'interaction',
	components: {},
	props: {
		//接收器信息
		machineData: {
			type: Object,
			default: () => {},
		},
		//表单数据
		formData: {
			type: Object,
			default: () => {},
		},
	},
	data() {
		return {
			isExpand: false, //控制台默认不展开
			testType: '',
			isFeedback: false,
			newstuList: this.studentList,
			signUserList: [],
			feedbackId: '',
			csId: '',
		};
	},
	created() {
		let beginClassData = this.$ls.get('beginClass'); //上课数据
		this.csId = beginClassData.csId;
		this.feedbackId = this.$ls.get('feedbackId') || '';
		this.isFeedback = !!this.feedbackId;
		if (this.feedbackId && this.studentList.length > 0) {
			this.getFeedbackInfoById();
		}
	},
	watch: {
		studentList: {
			handler(newValue, oldValue) {
				//监听学生名单，状态变化，同步给后端
				if (JSON.stringify(newValue) != JSON.stringify(oldValue)) {
					if (this.feedbackId && this.studentList.length > 0) {
						this.getFeedbackInfoById();
					} else {
						let list = [],
							signIds = [],
							noIds = [];
						if (this.signUserList && this.signUserList.length > 0) {
							signIds = this.signUserList
								.filter((item) => item.status == 1)
								.map((item) => item.machineId);
							noIds = this.signUserList.filter((item) => item.status == 0).map((item) => item.machineId);
						}
						if (newValue && newValue.length > 0) {
							newValue.forEach((item) => {
								let info = {
									studName: item.studName,
									machineId: item.machineId,
									studId: item.studId,
									status: 0,
								};
								if (signIds && signIds.length > 0 && signIds.includes(item.machineId)) {
									info.status = 1;
									list.push(info);
								} else if (noIds && noIds.length > 0 && noIds.includes(item.machineId)) {
									list.push(info);
								}
							});
						}
						this.signUserList = [...list];
					}
				}
			},
			immediate: true, //初始化时让handler调用一下
			deep: true, // 开启深度监听
		},
		wiredAnswer: {
			handler(newValue, oldValue) {
				console.log('newValue', newValue, this.feedbackId);
				if (
					newValue &&
					newValue.uID &&
					JSON.stringify(newValue) != JSON.stringify(oldValue) &&
					this.feedbackId
				) {
					let status = 0;
					if (this.isVoiceDevice) {
						let answer = newValue.ans_str;
						if (answer) {
							answer = answer == 'E' ? '√' : '×';
							status = answer == '√' ? 1 : 0;
							//发送回显
							this.WEBSOCKET_SEND({
								fun: 'dtq_echo_set',
								uID: newValue.uID,
								msg: '发送成功' + answer,
							});
						}
					} else {
						let info = newValue.ans_str[0];
						if (info.type == 'j') {
							status = info.answer == 'true' ? 1 : 0;
						}
					}
					this.studentList.forEach((item) => {
						if (item.machineId - 0 == newValue.uID) {
							let msg = {
								fdid: this.feedbackId,
								csId: this.csId,
								time: newValue.time,
								studId: item.studId,
								status: status, //0不懂，1懂
							};
							this.feedbackUpdate(msg);
							console.log('msg', msg);
							let index = this.signUserList.findIndex((sitem) => sitem.studId == item.studId);
							if (index >= 0) {
								this.signUserList.splice(index, 1);
							}
							this.$nextTick(() => {
								this.signUserList.unshift({
									...item,
									status,
								});
							});
						}
					});
				}
			},
			immediate: true, //初始化时让handler调用一下
			deep: true, // 开启深度监听
		},
	},
	computed: {
		...mapState({
			deviceType: (state) => state.websockStore.deviceType,
			studentList: (state) => state.websockStore.studentList,
			stopDeviceEventList: (state) => state.websockStore.stopDeviceEventList,
			isPro: (state) => state.isPro,
		}),
		wiredAnswer() {
			return this.$store.getters.onEvent('wiredanswer');
		},
		//反馈学生人数
		signInNum() {
			let list = [];
			if (this.signUserList && this.signUserList.length > 0) {
				list = this.signUserList.filter((item) => item.status == '1');
			}
			return list.length;
		},
		feedbackNo() {
			let list = [];
			if (this.signUserList && this.signUserList.length > 0) {
				list = this.signUserList.filter((item) => item.status == 0);
			}
			return list.length;
		},
		noFeedback() {
			let ids = this.signUserList.map((item) => item.studId);
			let list = this.studentList.filter((item) => !ids.includes(item.studId));
			return list;
		},
		//是否是语音设备
		isVoiceDevice() {
			return ['RP554', 'RP555P'].includes(this.machineData.wareVersion);
		},
	},

	methods: {
		...mapMutations(['WEBSOCKET_SEND', 'SET_studentList', 'SET_STOPDEVICEEVENTLIST', 'feedback_RABBITMQ_SEND']),
		toggleSign() {
			if (!this.isFeedback) {
				this.startFeedback();
			} else {
				this.endFeedback();
				this.addOpr();
			}
		},

		//开始反馈
		startFeedback(stuIds) {
			//左侧菜单需要用的数据
			let leftOperateData = this.$ls.get('leftOperateData');
			if (this.deviceType == 'wired') {
				if (!this.isFeedback) {
					this.$postAction(this.$sysManageapi.answerUrl.startFeedback + '?csId=' + this.csId).then((da) => {
						this.feedbackId = da.data;
						this.$ls.set('feedbackId', this.feedbackId);
						this.isFeedback = true;
						if (this.isVoiceDevice) {
							let msg = {
								fun: 'answer_start',
								uID: 0,
								type: 2,
							};
							this.WEBSOCKET_SEND(msg);
							//发送回显
							this.WEBSOCKET_SEND({
								fun: 'dtq_echo_set',
								uID: 0,
								msg: '  请按“√/×键”  进行反馈',
							});
						} else {
							let questions = [
								{
									type: 'j',
									id: 1,
									range: '',
								},
							];

							let msg = {
								fun: 'answer_start',
								questions: questions,
							};
							this.WEBSOCKET_SEND(msg);
						}

						this.$message.success('请按“√/×键”进行反馈');
					});
				}
			}
		},
		//停止签到
		endFeedback() {
			if (this.deviceType == 'wired') {
				this.$postAction(this.$sysManageapi.answerUrl.endFeedback + '?fdid=' + this.feedbackId).then((da) => {
					this.feedbackId = '';
					this.$ls.remove('feedbackId');
					if (this.isVoiceDevice) {
						this.WEBSOCKET_SEND({
							fun: 'answer_start',
							uID: 0,
							type: 128, //结束答题
						});
					} else {
						this.WEBSOCKET_SEND({ fun: 'answer_stop' });
					}

					this.isFeedback = false;
					this.signUserList = [];
					if (
						this.machineData.wareVersion != 'RP552G' &&
						!this.isVoiceDevice &&
						this.stopDeviceEventList.includes('answer_stop')
					) {
						let stopDeviceEventList = [...this.stopDeviceEventList];
						stopDeviceEventList = stopDeviceEventList.filter((item) => item != 'answer_stop');
						this.SET_STOPDEVICEEVENTLIST(stopDeviceEventList);
					}
					if (this.isVoiceDevice) {
						this.studentList.forEach((item) => {
							if (item.status == 1) {
								let msg = '   ' + item.studName;
								this.WEBSOCKET_SEND({
									fun: 'dtq_echo_set',
									uID: item.machineId - 0,
									msg: msg,
								});
							}
						});
					}
				});
			}
		},

		//返回
		reback() {
			/* 判断是否已经停止反馈*/
			if (this.isFeedback) {
				this.$message.error('请先停止反馈！');
				return;
			}
			this.$emit('checkMenu', { type: 'interaction' });
		},
		feedbackUpdate(signInUpdate) {
			//直接推送到队列
			this.feedback_RABBITMQ_SEND(JSON.stringify(signInUpdate));
		},
		getFeedbackInfoById() {
			this.$postAction(this.$sysManageapi.answerUrl.getFeedbackInfoById + '?fdid=' + this.feedbackId).then(
				(res) => {
					let list = [],
						signIds = [],
						noIds = [];
					if (res.data && res.data.feedbackRecordDtoList.length > 0) {
						signIds = res.data.feedbackRecordDtoList
							.filter((item) => item.status == 1)
							.map((item) => item.studId);
						noIds = res.data.feedbackRecordDtoList
							.filter((item) => item.status == 0)
							.map((item) => item.studId);
					}
					if (this.studentList && this.studentList.length > 0) {
						this.studentList.forEach((item) => {
							let info = {
								studName: item.studName,
								machineId: item.machineId,
								studId: item.studId,
								status: 0,
							};
							if (signIds && signIds.length > 0 && signIds.includes(item.studId)) {
								info.status = 1;
								list.push(info);
							} else if (noIds && noIds.length > 0 && noIds.includes(item.studId)) {
								list.push(info);
							}
						});
					}
					this.signUserList = [...list];
				}
			);
		},
		addOpr() {
			this.$postAction(this.$sysManageapi.answerUrl.addOpr, {
				classId: this.formData.classId,
				subjectCode: this.formData.subjectCode,
				opType: 'interaction',
				userId: this.userinfo.userId,
			});
		},
	},
};
</script>

<style lang="less" scoped>
.pageView {
	width: 100%;
	height: 100vh;
}
.pannel {
	position: relative;
	width: 1162px;
	margin: 0 auto;
	// padding: 50px 0 30px;
	@media screen and (max-width: 1366px) {
		width: 1024px;
	}
}
/* **头部题目类型** */
.topicType {
	width: 304px;
	height: 100px;
	line-height: 100px;
	position: fixed;
	top: 0;
	left: 49px;
	z-index: 7;
	.img {
		width: 304px;
		height: 100px;
		position: absolute;
		right: 0;
	}
	.name {
		position: absolute;
		top: 70%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 30px;
		color: #fff;
	}
	@media screen and (max-width: 1366px) {
		width: 254px;
		height: 80px;
		line-height: 80px;
		.img {
			width: 254px;
			height: 80px;
		}
		.name {
			font-size: 28px;
		}
	}
}
.cardbox {
	overflow: visible;
	height: 100%;
	position: relative;
	margin-top: 0;
	padding-top: 15px;
}
.cardbox .closeWin {
	position: absolute;
	right: -20px;
	bottom: -16px;
	width: 46px;
	height: 46px;
	img {
		display: block;
		width: 100%;
		height: 100%;
	}
}

.bind-con {
	height: calc(100vh - 200px);
	background: rgb(255, 255, 255);
	border-radius: 8px;
}

.bind-hd {
	font-size: 22px;
	color: #2e2424;
	text-align: center;
	margin-top: 29px;

	.class {
		letter-spacing: -1px;
	}

	.sign {
		margin: 0 40px;
	}

	.no-connect {
		color: @warning-color;
	}

	.connect {
		color: @primary-color;
	}
}

.bind-bd {
	width: 1162px;
	height: calc(100% - 90px);
	margin: 27px auto 50px;
	background: rgb(243, 248, 255);
	border: 2px solid @primary-color;
	border-radius: 10px;
	overflow: hidden;
	position: relative;
	@media screen and (max-width: 1366px) {
		width: 1024px;
	}

	.bind-ft {
		position: absolute;
		bottom: 0;
		left: -5px;
		right: 0;

		.bg {
			width: 231px;
			height: 79px;
		}

		.operate {
			position: absolute;
			right: 60px;
			bottom: 30px;
			font-size: 22px;
			color: #4d5053;
			cursor: pointer;
			background-color: #fff;

			img {
				width: 24px;
				height: 24px;
				margin-right: 12px;
			}
		}
	}

	.list {
		margin: 20px;
		background: rgb(255, 255, 255);
		border: 2px dashed @primary-color;
		border-radius: 10px;
		height: calc(100% - 40px);
		font-size: 20px;
		color: #2e2424;
		padding: 20px 32px 40px;
		overflow: auto;

		.sign-con {
			display: grid;
			grid-template-columns: repeat(10, calc((100% - 200px) / 10));
			row-gap: 25px;
			column-gap: 20px;
			line-height: 1;
			height: 0;
			.sign-item {
				color: #2e2424;
				font-size: 24px;
				img {
					width: 60px;
					height: 60px;
				}
			}
			@media screen and (max-width: 1366px) {
				column-gap: 10px;
				grid-template-columns: repeat(8, calc((100% - 80px) / 8));
			}
		}
	}
}
.tips {
	position: absolute;
	bottom: 22px;
	left: 30px;
	right: 30px;
	text-align: center;
	font-size: 20px;
	color: #242424;
	font-weight: bold;
	z-index: 9;
	background-color: #fff;
	padding-bottom: 30px;
	.high {
		color: @primary-color;
	}
}
.conbox-ft {
	width: 1162px;
	margin: 35px auto 0;
	padding: 10px 0;
	.save-btn {
		background: @primary-color;
		margin: 0 auto;
		width: 300px;
		height: 60px;
		line-height: 60px;
		text-align: center;
		color: #fff;
		font-size: 30px;
		font-weight: bold;
		border-radius: 40px;
		cursor: pointer;
		&.red {
			background: #e64343;
			border-color: rgba(230, 67, 67, 0.5);
		}
	}
	.save-btn.disabeld {
		background: #becad4;
	}
	@media screen and (max-width: 1366px) {
		width: 1024px;
	}
}
</style>

<style scoped>
.sign-item.bigtosmall {
	-webkit-animation: bigtosmall 1s ease forwards;
	opacity: 1;
}
@keyframes bigtosmall {
	0% {
		transform: scale(0.1);
		opacity: 0;
	}
	70% {
		transform: scale(1.2);
		opacity: 1;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}
@-webkit-keyframes bigtosmall {
	0% {
		-webkit-transform: scale(0.1);
		opacity: 0;
	}
	70% {
		-webkit-transform: scale(1.2);
		opacity: 1;
	}
	100% {
		-webkit-transform: scale(1);
		opacity: 1;
	}
}
</style>
